<template>
	<view class="vip-manage-content">
		<ycy-top-bar>会员管理</ycy-top-bar>
		<view class="card-content" :style="vipContentStyle">
			<!-- 卡片 -->
			<view class="card-item" v-if="isShow" v-for="(item, index) in showList" :key="index" @click.stop="onItemClick(item,index)" 
				  :style="item.style">
				<view class="item-name" :style="item.color">{{ item.name }}</view>
				<image class="item-image" :src="item.url"></image>
			</view>
			<!-- 卡片详情 -->
			<view class="card-detail" :style="cardDetailStyle">
				<view v-if="!isEdit" class="edit-btn"><u-icon name="setting" size="24" @click="onEdit"></u-icon></view>
				<view v-if="isEdit" class="cancel-btn"><u-icon name="close" size="24" @click="onCancel"></u-icon></view>
				<u--form :borderBottom="false" :model="currentItem" labelWidth="80" ref="uForm">
					<u-form-item label="会员卡名称" prop="name">
						<view v-if="!isEdit">{{ currentItem.name }}</view>
						<u--input v-else v-model="currentItem.name" border="bottom" clearable></u--input>
					</u-form-item>
					<u-form-item label="最低消费值" prop="minPrice">
						<view v-if="!isEdit">￥{{ currentItem.minPrice }}</view>
						<u--input v-else v-model="currentItem.minPrice" prefixIcon="rmb" border="bottom" clearable></u--input>
					</u-form-item>
					<u-form-item label="最高消费值" prop="maxPrice">
						<view v-if="!isEdit">￥{{ currentItem.maxPrice }}</view>
						<u--input v-else v-model="currentItem.maxPrice" prefixIcon="rmb" border="bottom" clearable></u--input>
					</u-form-item>
					<u-form-item label="折扣" prop="discount">
						<u-tag v-if="!isEdit" :text="`${currentItem.discount > 1 ? currentItem.discount: currentItem.discount * 100 }折`" 
						borderColor="#dd524d" color="#dd524d" plain></u-tag>
						<u--input v-else v-model="currentItem.discount" border="bottom" clearable></u--input>
					</u-form-item>
					<u-form-item label="启用" prop="enabled">
						<u-icon v-if="!isEdit && currentItem.enabled" name="checkmark-circle-fill" size="30" color="#9dae8a"></u-icon>
						<u-icon v-if="!isEdit && !currentItem.enabled" name="close-circle-fill" size="30" color="#dd524d"></u-icon>
						<u-switch v-if="isEdit" v-model="currentItem.enabled" activeColor="#9dae8a" inactiveColor="#dd524d"></u-switch>
					</u-form-item>
				</u--form>
				<view v-if="isEdit" class="confirm-btn">
					<u-button icon="checkmark" text="确认修改" color="#9dae8a" iconColor="#fff" @click="onConfirm" ></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async mounted() {
			uni.createSelectorQuery().select('.card-content').boundingClientRect(data => {
				this.cardContentTop = data.top;
			}).exec();
			await this.getVipCardList();
			this.$refs.uForm.setRules(this.rules);
			this.getAutoTop(0.6);
		},
		data() {
			return {
				isEdit: false,
				isShow: true,
				disCountPercent: 0,  //例如 88
				cardDetailTop: 100,  //100代表普通展示情况,非0表示卡片详情情况
				cardContentTop: 0,
				currentItem: {},
				showList: [],
				list: [],
				rules: {
					name: { asyncValidator: this.validateVipName },
					minPrice: { asyncValidator: this.validatePrice },
					maxPrice: { asyncValidator: this.validatePrice },
					discount: { asyncValidator: this.validateDisCount },
				}
			}
		},
		computed: {
			vipContentStyle() {
				return `height: calc(100% - ${this.cardContentTop}px);`
			},
			cardDetailStyle() {
				//显示卡片详情时，transition: top 0.8s。关闭时transition: top 0.6s;
				if(this.cardDetailTop == 100) return `top: ${this.cardDetailTop}%;transition: top 0.6s;` 
				else return `top: ${this.cardDetailTop}%;transition: top 0.8s;`
			},
		},
		methods: {
			validateVipName(rule, value, callback) {
				if(!value || value == '') callback(new Error('不能为空'))
			},
			validatePrice(rule, value, callback) {
				if(!value || value == '') callback(new Error('不能为空'))
				if(/^\d+(\.\d{1,2})?$/.test(value)) callback();
				else callback(new Error('请输入0以上的整数或最大两位小数'));
			},
			validateDisCount(rule, value, callback) {
				if(!value || value == '') callback(new Error('不能为空'))
				if(/^(0(\.\d{1,2})?|1(\.0{1,2})?)$/.test(value)) callback();
				else callback(new Error('请输入0到1的两位小数'));
			},
			onEdit() {
				this.isEdit = true;
			},
			onCancel() {
				this.isEdit = false;
				this.currentItem = JSON.parse(JSON.stringify(this.list[0]));
			},
			onConfirm() {
				this.isEdit = false;
				if(this.currentItem.discount > 1) this.currentItem.discount /= 100;
				Reflect.deleteProperty(this.currentItem,'style');
				console.log('confirm',this.currentItem);
				this.$refs.uForm.validate().then(res => {
								uni.$u.toast('校验通过')
							}).catch(errors => {
								uni.$u.toast('校验失败')
							})
			},
			onItemClick(item,index) {
				//卡片详情的情况
				if(this.cardDetailTop != 100) {
					this.goBack();
					return;
				}
				//普通展示的情况
				this.currentItem = JSON.parse(JSON.stringify(item)); //直接复制会导致后续确认修改删除style属性时,showList中的卡片样式也跟着删除了。
				this.showCardDetail(index);
				// console.log('onItemClick',{ item, index })
			},
			showCardDetail(index) {
				this.showList.push(this.showList[index]);
				this.showList.splice(index,1);
				this.showList.forEach((item,i) => {
					item.style = `top: ${4 + 3 * i}%;transition: top 0.6s;`;
					//当循环到最后一项时,给cardDetailTop赋值。其中4 + 3 * i为最后一张卡片的top值,再加上卡片高度和一个间隔高度值。
					if(i == this.showList.length - 1) this.cardDetailTop = 4 + 3 * i + 22 + 4;
				})
				this.reFreshList();
			},
			getAutoTop(seconds) {
				//给卡片添加能适应屏幕高度的间隔距离
				this.showList.forEach((item,index) => {
					//顶部和底部预留4%的宽度，再减去一张卡片的百分比高度，除以总卡片的间隔数(总数-1)
					item.style = `top: ${4 + (100 - 4 * 2 - 22) / (this.showList.length - 1) * index}%;transition: top ${seconds}s;`
				})
			},
			goBack() {
				this.cardDetailTop = 100;
				this.showList = JSON.parse(JSON.stringify(this.list));
				this.getAutoTop(0.6);
				this.reFreshList();
				setTimeout(() => {
					this.currentItem = {};
				},600)
			},
			reFreshList() {
				//虽然该字段控制视图强制更新,但仍在同一个tick中,过渡动画translation就会执行。如果在this.$nextTick中置为true，就没有动画了。
				this.isShow = false;
				this.isShow = true;
			},
			getVipCardList() {
				const data = [
					{
						id: '1',
						name: '至尊会员',
						color: 'color:white',
						minPrice: 1314,
						maxPrice: 999999,
						discount: 0.80,
						enabled: true,
						url: '../../../../static/image/zhiZunVip.png'  //每张图片的color值是固定的
					},
					{
						id: '2',
						name: '钻石会员',
						color: 'color:white',
						minPrice: 888,
						maxPrice: 1313.99,
						discount: 0.85,
						enabled: true,
						url: '../../../../static/image/zuanShiVip.png'
					},
					{
						id: '3',
						name: '铂金会员',
						color: 'color:black',
						minPrice: 520,
						maxPrice: 887.99,
						discount: 0.88,
						enabled: true,
						url: '../../../../static/image/boJinVip.png'
					},
					{
						id: '4',
						name: '黄金会员',
						color: 'color:black',
						minPrice: 131.40,
						maxPrice: 519.99,
						discount: 0.92,
						enabled: true,
						url: '../../../../static/image/huangJinVip.png'
					},
					{
						id: '5',
						name: '白银会员',
						color: 'color:black',
						minPrice: 1,
						maxPrice: 130.39,
						discount: 0.96,
						enabled: true,
						url: '../../../../static/image/baiYinVip.png'
					}
				]
				this.list = data;
				this.currentItem = JSON.parse(JSON.stringify(data[0]));
				this.showList = JSON.parse(JSON.stringify(data));
			}
		}
	}
</script>

<style lang="scss">
.vip-manage-content {
	height: 100vh;
	.card-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
		.item-name {
			position: absolute;
			font-size: 45rpx;
			letter-spacing: 2px;
			top: 10%;
			left: 5%;
		}
		.card-item {
			height: 22%;
			width: 90%;
			position: absolute;
			top: 4%;
			// transition: top 0.6s;
			.item-image {
				height: 100%;
				width: 100%;
				// box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.1);
			}
		}
		.card-detail {
			position: absolute;
			display: flex;
			width: 82%;
			background-color: #e4e4e4;
			border-radius: 16rpx;
			padding: 32rpx;
			.u-tag__text--medium {
				font-weight: bold;
			}
			.u-tag-wrapper {
				width: 60px;
			}
			.u-tag--medium {
				padding: 0;
				display: flex;
			    justify-content: center;
			}
			.edit-btn {
				padding: $spacing-small;
				position: absolute;
				right: $spacing-small;
			}
			.cancel-btn {
				padding: $spacing-small;
				position: absolute;
				top: 0%;
				right: $spacing-small;
			}
			.confirm-btn {
				position: absolute;
				right: $spacing-small;
				bottom: $spacing-small;
			}
			.u-border-bottom {
				border-color: $green-bg-color !important;
			}
		}
	}
}
</style>
